import { Tabbar } from "@nutui/nutui-react-taro";
import { Cart, Category, Home, IconFont } from "@nutui/icons-react-taro";
import Taro, { useDidHide, useLoad, useReady, useUnload } from "@tarojs/taro";
import { Button, Span, View } from "@tarojs/components";
import { useEffect, useState } from "react";

export default function CustomTabBar(props) {
    const [isLogin, setIsLogin] = useState(false);
    useLoad(()=>{
        //debugger
          
    })

    useEffect(()=>{
        //debugger
        // Taro.getStorageSync("token")?setIsLogin(true):setIsLogin(false);
    })
    useReady(()=>{
        //debugger
       //         Taro.getStorageSync("token")?setIsLogin(true):setIsLogin(false);
           })
           useUnload(()=>{
            //debugger
        })
        useDidHide(()=>{
            //debugger
        })
        //debugger
  const onSwitch = (index) => {
    switch (index) {
      case 0:
        Taro.switchTab({ url: "/pages/index/index" });
        break;
      case 1:
        Taro.switchTab({ url: "/pages/recommend/recommend" });
        break;
      case 2:
        Taro.switchTab({ url: "/pages/releaseActivity/releaseActivity" });
        break;
      case 3:
        Taro.switchTab({ url: "/pages/message/message" });
        break;
      case 4:
        Taro.switchTab({ url: "/pages/my/my" });
        break;
    }
  };
  return (
    <View style={{ position: "fixed", bottom: "20rpx" ,width:'100vw'}}>
      {!isLogin ? (
        <View
          onClick={() => {
            Taro.navigateTo({ url: "/login/login/login" });
          }}
          style={{
            background: "#FFEFEB",
            display: "flex",
            height: "80rpx",
            justifyContent: "space-between",
            padding: "0 30rpx",
            alignItems: "center",
          }}
        >
          <Span style={{ color: "#EC6138" }}>终于等到你，快来登录吧</Span>
          <Button
            className="global_button"
            style={{
              width: "160rpx",
              height: "48rpx",
              fontSize: "24rpx",
              lineHeight: "48rpx",
              marginLeft: "220rpx",
            }}
          >
            马上登录
          </Button>
        </View>
      ) : null}
      <Tabbar
        activeColor="#ec6138"
        inactiveColor="#999999"
        onSwitch={onSwitch}
        style={{
          //@ts-ignorets
          "--nutui-tabbar-height": "100rpx",
          "--nutui-tabbar-text-font-size": "$font-size-md",
        }}
      >
        <Tabbar.Item title="首页" icon={<Home size={24} />} />
        <Tabbar.Item title="推荐" icon={<Category size={24} />} />
        <Tabbar.Item
          icon={
            <IconFont
              fontClassName="icon-jia"
              classPrefix="iconfont"
              size={50}
              color="#EC6138"
            />
          }
        />
        <Tabbar.Item title="消息" icon={<Cart size={24} />} />
        <Tabbar.Item
          title="我的"
          icon={
            <IconFont
              fontClassName="icon-wodeB"
              classPrefix="iconfont"
              size={24}
            />
          }
        />
      </Tabbar>
    </View>
  );
}
